<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>规则编辑-{{name}}</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css">
    <script src="/static/plugin/layui/layui.js"></script>
    <script src="/static/js/jquery.min.js"></script>

    <style>
        body {
            background-color: #ffffff;
        }
        .footer {
            padding-top: 5px;
            padding-left: 10px;
            text-align: left;
            position: fixed;
            bottom: 0px;
            background-color:#ddd;
            width:100%;

        }
        .footer > button{
            border-radius: 25px;
        }
        .center{
            margin-bottom: 60px;
        }
        #script_code{
            height: 600px;
        }
    </style>
</head>
<body>


<div class="layui-form layuimini-form layuimini-container layui-form-pane container"  lay-filter="scripts">
<!--<div class="layui-form layui-form-pane"  lay-filter="scripts">-->

    <div class="header">
    <div class="layui-form-item" pane="">
        <label class="layui-form-label required">脚本类型</label>
        <div class="layui-input-block">
            <input type="radio"  name="script_code" id="script_code_js" lay-filter="ck-code" value="javascript" title="js" checked>
        </div>
    </div>
    </div>

    <div class="center">

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label required">脚本区域</label>
        <div class="layui-input-block">
            <textarea id="script_code" name='scripts_code' class="layui-textarea"></textarea>
        </div>
    </div>
    </div>

    <div class="layui-btn-container footer layer-footer">
        <button class="layui-btn layui-btn-normal " lay-submit lay-filter="reBtn"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn"><i class="layui-icon layui-icon-ok"></i>保存</button>
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="openRawBtn"><i class="layui-icon layui-icon-file-b"></i>原始</button>
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="openFileBtn"><i class="layui-icon layui-icon-file-b"></i>渲染后</button>
    </div>

</div>

<script>
    const raw_url = '/raw/js/{{name}}';
    const api_url = '/admin/view/{{name}}';
    const api_save_url = '/admin/save_edit/{{name}}';
    // 初始化 脚本编辑页面
    function init_scripts(form) {
        $.ajax({
            type:'get',
            url: raw_url,
            timeout : 2000,
            async:false,
             // data:'',
             // dataType:'json',
            success: function(data) {
                // console.log(data);
                console.log(`访问${raw_url} success`);
                $('#script_code').val(data);
                form.render();
            },error: function(XMLHttpRequest,textStatus,errorThrown) {
                if (XMLHttpRequest.status == 0) {
                  layer.msg('Check Your Network.',{icon: 2},function () {});
                } else if (XMLHttpRequest.status == 404) {
                  layer.msg('Requested URL not found.',{icon: 2},function () {});
                } else if (XMLHttpRequest.status == 500) {
                  layer.msg('Internel Server Error.',{icon: 2},function () {});
                } else {
                    console.log(`访问${raw_url} error`);
                   let code = XMLHttpRequest.responseText;
                   $('#script_code').val(code);
                   form.render();
                }
         }
        });
    }
</script>
<script>
    //选择脚本类型JS
    var script_sh=$("#script_shell").val();
    var script_py=$("#script_python").val();
    var script_js=$("#script_js").val();

    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        init_scripts(form);
        form.on('submit(openRawBtn)',function (data) {
            open(raw_url);
        });
        form.on('submit(openFileBtn)',function (data) {
            open(api_url);
        });
        form.on('submit(reBtn)', function (data) {
            init_scripts(form);
        });
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            layer.confirm('确认保存？', {
                title: "操作提示",
                icon: 0,
                btn: ['确定']
            } ,function(index){
                let txt = $('#script_code').val();
                // console.log(txt);
                let postData = {
                    name: '{{name}}',
                    code: txt,
                    // code:txt.replaceAll("+","&").replaceAll("console.log","console.Log")
                }
                // console.log(postData);
                $.ajax({
                    type: 'post',
                    url: api_save_url,
                    data: postData,
                    dataType: 'json',
                    async: false,
                    success: function (ret) {
                        console.log(ret);
                        layer.msg(ret.msg);
                    }
                });

                layer.close(index);
            });

            return false;
        });

        form.on('radio(ck-code)', function(data){
            // var lang=$(this).prop("id");
            // console.log(txt,lang);
            console.log(data.value);
        });
    });
</script>
</body>
</html>